<form nz-form nzLayout="vertical" #validateForm="ngForm" (ngSubmit)="saveAll()" autocomplete="off">
    <page-header [title]="title">
        <ng-template #title>
            {{'Settings' | localize}}
            <span class="text-sm text-grey-dark">
                <nz-divider nzType="vertical"></nz-divider>
                {{'SettingsHeaderInfo' | localize}}
            </span>
        </ng-template>
    </page-header>

    <nz-tabset *ngIf="settings" [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="l('General')" *ngIf="showTimezoneSelection">
            <nz-card [nzBordered]="false">
                <nz-form-item nz-row>
                    <nz-form-label nzFor="Timezone">
                        {{"Timezone" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <timezone-combo id="Timezone" [(selectedTimeZone)]="settings.general.timezone"
                            defaultTimezoneScope="{{defaultTimezoneScope}}"></timezone-combo>
                    </nz-form-control>
                </nz-form-item>
            </nz-card>
        </nz-tab>
        <nz-tab [nzTitle]="l('UserManagement')" *ngIf="true">
            <nz-card [nzBordered]="false">
                <h3>{{"FormBasedRegistration" | localize}}</h3>
                <nz-form-item nz-row>
                    <nz-form-control [nzExtra]="l('AllowUsersToRegisterThemselves_Hint')">
                        <label nz-checkbox name="AllowSelfRegistration"
                            [(ngModel)]="settings.userManagement.allowSelfRegistration">
                            {{"AllowUsersToRegisterThemselves" | localize}}
                        </label>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-control [nzExtra]="l('NewRegisteredUsersIsActiveByDefault_Hint')">
                        <label nz-checkbox name="IsNewRegisteredUserActiveByDefault"
                            [(ngModel)]="settings.userManagement.isNewRegisteredUserActiveByDefault">
                            {{"NewRegisteredUsersIsActiveByDefault" | localize}}
                        </label>
                    </nz-form-control>
                </nz-form-item>
                <h3>{{"SessionTimeOut" | localize}}</h3>
                <nz-form-item nz-row class="m0">
                    <div nz-col>
                        <label nz-checkbox name="SessionTimeOutSettingsIsEnabled"
                            [(ngModel)]="settings.userManagement.sessionTimeOutSettings.isEnabled">{{"IsSessionTimeOutEnabled" | localize}}</label>
                    </div>
                </nz-form-item>
                <nz-form-item nz-row class="m0" *ngIf="settings.userManagement.sessionTimeOutSettings.isEnabled">
                    <div>
                        <label nz-checkbox name="ShowLockScreenWhenTimedOut"
                            [(ngModel)]="settings.userManagement.sessionTimeOutSettings.showLockScreenWhenTimedOut">{{"ShowLockScreenWhenTimedOut" | localize}}</label>
                    </div>
                    <nz-form-label nzFor="Setting_SessionTimeOutSecond">
                        {{"SessionTimeOutSecond" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <input nz-input type="number" name="Setting_SessionTimeOutSecond"
                            [(ngModel)]="settings.userManagement.sessionTimeOutSettings.timeOutSecond"
                            id="Setting_SessionTimeOutSecond">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row class="m0" *ngIf="settings.userManagement.sessionTimeOutSettings.isEnabled">
                    <nz-form-label nzFor="Setting_ShowTimeOutNotificationSecond">
                        {{"DefaultAccountLockoutDurationAsSeconds" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <input nz-input type="number" name="Setting_ShowTimeOutNotificationSecond"
                            [(ngModel)]="settings.userManagement.sessionTimeOutSettings.showTimeOutNotificationSecond"
                            id="Setting_ShowTimeOutNotificationSecond">
                    </nz-form-control>
                </nz-form-item>
                <div *ngIf="settings.ldap.isModuleEnabled">
                    <h3 class="">{{"LdapSettings" | localize}}</h3>
                    <nz-form-item nz-row>
                        <nz-form-control [nzExtra]="l('EnableLdapAuthentication')">
                            <label nz-checkbox name="LdapIsEnabled" [(ngModel)]="settings.ldap.isEnabled">
                                {{"EnableLdapAuthentication" | localize}}
                            </label>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-row *ngIf="settings.ldap.isEnabled">
                        <nz-form-label nzFor="LdapDomainName">
                            {{"DomainName" | localize}}
                        </nz-form-label>
                        <nz-form-control [nzErrorTip]="ldapDomainValidationTpl" nzHasFeedback>
                            <input nz-input #ldapDomainNameInput="ngModel" name="LdapDomainName"
                                [(ngModel)]="settings.ldap.domain" placeholder="{{'DomainName' | localize}}"
                                id="LdapDomainName" maxlength="128">
                            <ng-template #ldapDomainValidationTpl let-control>
                                <validation-messages [formCtrl]="control"></validation-messages>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-row *ngIf="settings.ldap.isEnabled">
                        <nz-form-label nzFor="LdapUserName">
                            {{"UserName" | localize}}
                        </nz-form-label>
                        <nz-form-control [nzErrorTip]="ldapUserNameValidationTpl" nzHasFeedback>
                            <input nz-input #ldapUserNameInput="ngModel" name="LdapUserName"
                                [(ngModel)]="settings.ldap.userName" placeholder="{{'UserName' | localize}}"
                                id="LdapUserName" maxlength="128">
                            <ng-template #ldapUserNameValidationTpl let-control>
                                <validation-messages [formCtrl]="control"></validation-messages>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-row *ngIf="settings.ldap.isEnabled">
                        <nz-form-label nzFor="LdapPassword">
                            {{"Password" | localize}}
                        </nz-form-label>
                        <nz-form-control [nzErrorTip]="ldapPasswordValidationTpl" nzHasFeedback>
                            <input nz-input #ldapPasswordInput="ngModel" name="LdapPassword"
                                [(ngModel)]="settings.ldap.password" placeholder="{{'Password' | localize}}"
                                id="LdapPassword" maxlength="128">
                            <ng-template #ldapPasswordValidationTpl let-control>
                                <validation-messages [formCtrl]="control"></validation-messages>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div>
                    <h3>{{"OtherSettings" | localize}}</h3>
                    <div nz-row>
                        <label nz-checkbox name="IsEmailConfirmationRequiredForLogin"
                            [(ngModel)]="settings.userManagement.isEmailConfirmationRequiredForLogin">{{"EmailConfirmationRequiredForLogin" | localize}}</label>
                    </div>
                </div>
            </nz-card>
        </nz-tab>
        <nz-tab [nzTitle]="l('Security')" *ngIf="true">
            <nz-card [nzBordered]="false">
                <h3>{{"PasswordComplexity" | localize}}</h3>
                <div nz-row>
                    <label nz-checkbox name="Setting_PasswordComplexity_UseDefaultSettings"
                        [(ngModel)]="settings.security.useDefaultPasswordComplexitySettings">{{"UseDefaultSettings" | localize}}</label>
                </div>
                <div nz-row>
                    <label nz-checkbox name="Setting_PasswordComplexity_RequireDigit"
                        [(ngModel)]="settings.security.passwordComplexity.requireDigit"
                        [nzDisabled]="settings.security.useDefaultPasswordComplexitySettings">{{"PasswordComplexity_RequireDigit" | localize}}</label>
                </div>
                <div nz-row>
                    <label nz-checkbox name="Setting_PasswordComplexity_RequireLowercase"
                        [(ngModel)]="settings.security.passwordComplexity.requireLowercase"
                        [nzDisabled]="settings.security.useDefaultPasswordComplexitySettings">{{"PasswordComplexity_RequireLowercase" | localize}}</label>
                </div>
                <div nz-row>
                    <label nz-checkbox name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                        [(ngModel)]="settings.security.passwordComplexity.requireNonAlphanumeric"
                        [nzDisabled]="settings.security.useDefaultPasswordComplexitySettings">{{"PasswordComplexity_RequireNonAlphanumeric" | localize}}</label>
                </div>
                <div nz-row>
                    <label nz-checkbox name="Setting_PasswordComplexity_RequireUppercase"
                        [(ngModel)]="settings.security.passwordComplexity.requireUppercase"
                        [nzDisabled]="settings.security.useDefaultPasswordComplexitySettings">{{"PasswordComplexity_RequireUppercase" | localize}}</label>
                </div>
                <div nz-row>
                    <label nz-typography [nzDisabled]="settings.security.useDefaultPasswordComplexitySettings">{{"PasswordComplexity_RequiredLength" | localize}}</label>
                    <input nz-input type="number" name="RequiredLength" class="form-control"
                        [(ngModel)]="settings.security.passwordComplexity.requiredLength"
                        *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                    <input nz-input type="number" name="RequiredLength" class="form-control"
                        [(ngModel)]="settings.security.defaultPasswordComplexity.requiredLength"
                        *ngIf="settings.security.useDefaultPasswordComplexitySettings" disabled>
                </div>
                <h3 class="mt-md">{{"UserLockOut" | localize}}</h3>
                <nz-form-item nz-row class="m0">
                    <label nz-checkbox name="Setting_UserLockOut_IsEnabled"
                        [(ngModel)]="settings.security.userLockOut.isEnabled">{{"EnableUserAccountLockingOnFailedLoginAttemts" | localize}}</label>
                </nz-form-item>
                <nz-form-item nz-row class="m0" *ngIf="settings.security.userLockOut.isEnabled">
                    <nz-form-label nzFor="MaxFailedAccessAttemptsBeforeLockout">
                        {{"MaxFailedAccessAttemptsBeforeLockout" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <input nz-input type="number" name="MaxFailedAccessAttemptsBeforeLockout"
                            [(ngModel)]="settings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout"
                            id="MaxFailedAccessAttemptsBeforeLockout">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row class="m0" *ngIf="settings.security.userLockOut.isEnabled">
                    <nz-form-label nzFor="DefaultAccountLockoutSeconds">
                        {{"DefaultAccountLockoutDurationAsSeconds" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <input nz-input type="number" name="DefaultAccountLockoutSeconds"
                            [(ngModel)]="settings.security.userLockOut.defaultAccountLockoutSeconds"
                            id="DefaultAccountLockoutSeconds">
                    </nz-form-control>
                </nz-form-item>
                <div *ngIf="!isMultiTenancyEnabled || settings.security.twoFactorLogin.isEnabledForApplication">
                    <h3 class="mt-md">{{"TwoFactorLogin" | localize}}</h3>
                    <div nz-row>
                        <label nz-checkbox name="Setting_TwoFactorLogin_IsEnabled"
                            [(ngModel)]="settings.security.twoFactorLogin.isEnabled">{{"EnableTwoFactorLogin" | localize}}</label>
                    </div>
                    <div nz-row *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                        <label nz-checkbox name="Setting_TwoFactorLogin_IsEmailProviderEnabled"
                            [(ngModel)]="settings.security.twoFactorLogin.isEmailProviderEnabled">{{"IsEmailVerificationEnabled" | localize}}</label>
                    </div>
                    <div nz-row *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                        <label nz-checkbox name="Setting_TwoFactorLogin_IsSmsProviderEnabled"
                            [(ngModel)]="settings.security.twoFactorLogin.isSmsProviderEnabled">{{"IsSmsVerificationEnabled" | localize}}</label>
                    </div>
                    <div nz-row *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                        <label nz-checkbox name="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled"
                            [(ngModel)]="settings.security.twoFactorLogin.isGoogleAuthenticatorEnabled">{{"IsGoogleAuthenticatorEnabled" | localize}}</label>
                    </div>
                    <div nz-row *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                        <label nz-checkbox name="Setting_TwoFactorLogin_IsRememberBrowserEnabled"
                            [(ngModel)]="settings.security.twoFactorLogin.isRememberBrowserEnabled">{{"AllowToRememberBrowserForTwoFactorLogin" | localize}}</label>
                    </div>
                </div>
                <div *ngIf="!isMultiTenancyEnabled">
                    <h3  class="mt-md">{{"OneConcurrentLoginPerUser" | localize}}</h3>
                    <div nz-row>
                        <label nz-checkbox name="Setting_IsOneConcurrentLoginPerUserActive"
                            [(ngModel)]="settings.security.allowOneConcurrentLoginPerUser">{{"OneConcurrentLoginPerUserActive" | localize}}</label>
                    </div>
                </div>
            </nz-card>
        </nz-tab>
        <nz-tab [nzTitle]="l('EmailSmtp')" *ngIf="!isMultiTenancyEnabled">
            <nz-card [nzBordered]="false">
                <nz-form-item nz-row>
                    <nz-form-label nzFor="DefaultFromAddress">
                        {{"DefaultFromAddress" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="fromAddressValidationTpl" nzHasFeedback>
                        <input nz-input #defaultFromAddressInput="ngModel" name="DefaultFromAddress"
                            [(ngModel)]="settings.email.defaultFromAddress" id="DefaultFromAddress" email
                            maxlength="128">
                        <ng-template #fromAddressValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="DefaultFromDisplayName">
                        {{"DefaultFromDisplayName" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="fromDisplayNameValidationTpl" nzHasFeedback>
                        <input nz-input #defaultFromDisplayNameInput="ngModel" name="DefaultFromDisplayName"
                            [(ngModel)]="settings.email.defaultFromDisplayName" id="DefaultFromDisplayName"
                            maxlength="128">
                        <ng-template #fromDisplayNameValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="SmtpHost">
                        {{"SmtpHost" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="smtpHostValidationTpl" nzHasFeedback>
                        <input nz-input #smtpHostInput="ngModel" name="SmtpHost" [(ngModel)]="settings.email.smtpHost"
                            id="SmtpHost" maxlength="64">
                        <ng-template #smtpHostValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nzFor="SmtpPort">
                        {{"SmtpPort" | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <input nz-input type="number" #smtpPortInput="ngModel" name="SmtpPort"
                            [(ngModel)]="settings.email.smtpPort" id="SmtpPort">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <div nz-col><label nz-checkbox name="SmtpEnableSsl"
                            [(ngModel)]="settings.email.smtpEnableSsl">{{"UseSsl" | localize}}</label></div>
                </nz-form-item>
                <nz-form-item nz-row>
                    <div nz-col><label nz-checkbox name="SmtpUseDefaultCredentials"
                            [(ngModel)]="settings.email.smtpUseDefaultCredentials">{{"UseDefaultCredentials" | localize}}</label>
                    </div>
                </nz-form-item>
                <nz-form-item nz-row [hidden]="settings.email.smtpUseDefaultCredentials">
                    <nz-form-label nzFor="SmtpDomainName">
                        {{"DomainName" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="smtpDomainValidationTpl" nzHasFeedback>
                        <input nz-input #smtpDomainNameInput="ngModel" name="SmtpDomainName"
                            [(ngModel)]="settings.email.smtpDomain" id="SmtpDomainName" maxlength="128">
                        <ng-template #smtpDomainValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row [hidden]="settings.email.smtpUseDefaultCredentials">
                    <nz-form-label nzFor="SmtpUserName">
                        {{"UserName" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="smtpUserNameValidationTpl" nzHasFeedback>
                        <input nz-input #smtpUserNameInput="ngModel" name="SmtpUserName"
                            [(ngModel)]="settings.email.smtpUserName" id="SmtpUserName" maxlength="128">
                        <ng-template #smtpUserNameValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row [hidden]="settings.email.smtpUseDefaultCredentials">
                    <nz-form-label nzFor="SmtpPassword">
                        {{"Password" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="smtpPasswordValidationTpl" nzHasFeedback>
                        <input nz-input type="password" #smtpPasswordInput="ngModel" name="SmtpPassword"
                            [(ngModel)]="settings.email.smtpPassword" id="Password" maxlength="128">
                        <ng-template #smtpPasswordValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-divider></nz-divider>
                <h3>{{"TestEmailSettingsHeader" | localize}}</h3>
                <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
                    <input type="text" nz-input [(ngModel)]="testEmailAddress" name="TestEmailAddress">
                </nz-input-group>
                <ng-template #suffixButton>
                    <button nz-button nzType="primary" nzSearch
                        (click)="sendTestEmail()">{{"SendTestEmail" | localize}}</button>
                </ng-template>
            </nz-card>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button [nzType]="'primary'" type="submit">
            <i nz-icon nzType="save"></i> {{"SaveAll" | localize}}
        </button>
    </ng-template>
</form>